<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Proxy</title>
</head>
<body>
  <div id="app">

  </div>
  <script>
      let data = {
          msg: 'hello',
          count: 10
      }

      let vm = new Proxy(data, {
          // 执行代理函数
          // 当获取vm中的属性的时候 调用该函数
          get(target, key) {
              console.log('get:', target[key])
              return target[key]
          },
          // 当修改vm中属性的时候 调用该函数
          set(target, key, newValue) {
              console.log('set:', newValue)
              if(target[key] === newValue) return
              target[key] = newValue
              document.querySelector('#app').textContent = target[key]
          }
      })

      vm.msg = 'hello world'
      console.log(vm.msg)
  </script>
</body>
</html>